<!--列表-->
<template>
  <div class="base-content systemLog-info">
    <!-- 流程列表 -->
    <div class="basic-info">
      <el-form ref="filterForm" :model="filterForm" inline>
        <el-form-item :label="dataList.DateRange">
          <el-date-picker
            v-model="filterForm.time"
            type="daterange"
            value-format="yyyy-MM-dd"
            :start-placeholder="dataList.StartDate"
            :end-placeholder="dataList.EndDate"
            class="m-l-10 m-r-10"
            style="width: 230px"
            align="right"
          ></el-date-picker>
        </el-form-item>
        <el-form-item :label="dataList.LogType">
          <el-select
            v-model="filterForm.operationType"
            filterable
            :placeholder="btn.PleaseSelect"
          >
            <el-option
              v-for="item in logOperationTypes"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="base-filter-button">
          <el-button
            v-loading="searchLoading"
            type="primary"
            @click="getList('filter')"
            >{{ btn.Query }}</el-button
          >
          <el-button @click="cancelForm">{{ btn.Clear }}</el-button>
        </el-form-item>
      </el-form>

      <!--列表-->
      <el-table
        v-loading="tableLoad"
        :data="tableData"
        tooltip-effect="dark"
        @row-dblclick="dbclick"
      >
        <el-table-column :label="dataList.number" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="logObjTypeAlias"
          :label="dataList.ServiceModule"
          min-width="120"
        >
        </el-table-column>
        <el-table-column prop="operationName" :label="dataList.OperationName" min-width="120">
        </el-table-column>
        <el-table-column prop="level" :label="dataList.LogEventLevel" min-width="120">
        </el-table-column>

        <el-table-column
          prop="createTime"
          :label="dataList.OperatingTime"
          sortable
          min-width="120"
        />
        <el-table-column
          prop="operatorName"
          :label="dataList.Operator"
          sortable
          min-width="120"
        />
        <el-table-column :label="btn.operate" width="140">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <el-link type="primary" @click="looklog(scope.row)">{{ btn.Look }}</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <BasePagination
        :total="total"
        :current-page="pageInfo.pageIndex"
        :page-count="pageCount"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />

      <!--查看日志-->
      <SystemLogDialog v-model="isShowDialog" :row="row" />
    </div>
  </div>
</template>
<script>
import { getLogList } from "../../../api/System/SystemLog.js";
import { formatTimeMax, formatSubtractTime } from "../../../utils/time";
import { logOperationTypeMap } from "../../../utils/dictionary";
export default {
  pageLoading: true,
  name: "SystemLogList",
  components: {
    SystemLogDialog: () => import("./SystemLogDialog.vue"),
  },
  data() {
    return {
      filterForm: {
        operationType: -1,
        time: [formatSubtractTime(), formatTimeMax()],
      },

      searchLoading: false,
      tableLoad: true,
      isShowDialog: false,
      readOnlyInfo: false,
      row: {},
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      workFlowTypeList: [],
      total: 0,
      pageCount: 0,
    };
  },
  computed: {
    logOperationTypes() {
      const arr = [];
      arr.push({ value: -1, label: this.$t("ModuleSystem.System.All") });
      for (const i in logOperationTypeMap) {
        arr.push({ value: i, label: logOperationTypeMap[i] });
      }
      return arr;
    },
    btn() {
      return this.$t("ModuleSystem.buttons");
    },
    dataList() {
      return this.$t("ModuleSystem.System");
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList(flag) {
      this.searchLoading = true;
      this.tableLoad = true;
      // flag === filter 表示流程输入了搜索条件 从第一页开始查
      if (flag) {
        this.pageInfo.pageIndex = 1;
      }
      const requestData = JSON.parse(JSON.stringify(this.filterForm));
      requestData.beginDate = requestData.time && requestData.time[0];
      requestData.endDate = requestData.time && requestData.time[1];
      // 列表
      getLogList({
        ...requestData,
        ...this.pageInfo,
      })
        .then((res) => {
          this.tableData = res.data.dataList;
          this.total = res.data.total;
          this.pageCount = res.data.total;
          this.tableLoad = false;
          this.searchLoading = false;
        })
        .catch(() => {
          this.tableLoad = false;
          this.searchLoading = false;
        });
    },
    // 查看流程详情
    looklog(row) {
      this.readOnlyInfo = true;
      this.row = row;
      this.isShowDialog = true;
    },

    // 双击行
    dbclick(row, column, event) {
      // console.log(row);
    },

    // 清空筛选条件
    cancelForm() {
      this.$refs.filterForm.model.flowName = "";
      this.$refs.filterForm.model.operationType = -1;
      this.getList("filter");
    },

    // 切换页码
    changePage(page) {
      this.pageInfo.pageIndex = page;
      this.getList();
    },
    sizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.systemLog-info {
  padding: 0;
  background: #f8fbff;
  display: flex;
  align-items: flex-start;
  .basic-info {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 28px 20px 0;
    box-sizing: border-box;
    position: relative;
    .el-table {
      margin-top: 12px;
    }
  }
}
</style>
